<template>
	<ezpage title="附近">
		<view slot="contentSection" style="height: 100%;">
			<map :markers="markers" @markertap="btnMarkerTap" :latitude="latitude" :longitude="longitude"
				:show-location="true" @regionchange="onRegionChanged" style="width: 100%;height: 100%;"></map>
		</view>
	</ezpage>
</template>

<script>
	import cloudApi from "../../common/cloudApi.js"
	import ezpage from "../../components/ezpage.vue"

	let shelfs;
	export default {
		components: {
			ezpage
		},
		data() {
			return {
				latitude: "",
				longitude: "",
				markers: []
			}
		},
		onLoad() {
			uni.getLocation({
				success: (res) => {
					this.latitude = res.latitude;
					this.longitude = res.longitude;
				}
			})
		},
		methods: {
			btnMarkerTap(e) {

				const markerId = e.markerId;
				const shelfInfo = shelfs[markerId];

				console.log(shelfInfo);

				uni.navigateTo({
					url: "../bookshelf/bookshelf?id=" + shelfInfo._id
				})

			},
			onRegionChanged(e) {
				if (e.type == "end") { //表示在拖动事件结束后调用
					const latitude = e.detail.centerLocation.latitude;
					const longitude = e.detail.centerLocation.longitude;

					cloudApi.call({
						name: "bookshelfs",
						data: {
							action: "listbygeo",
							longitude: longitude,
							latitude: latitude
						},
						success: (res) => {
							console.log(res);

							shelfs = res.result;
							let markers = [];
							for (let i = 0; i < shelfs.length; i++) {
								let item = shelfs[i];
								markers.push({
									id: i, //用于标记markerId，用于点击
									width: 55, //像素值
									height: 60,
									iconPath: "/static/mapmarker_shelf.png",
									latitude: item.geopoint.coordinates[1],
									longitude: item.geopoint.coordinates[0],
								});
							}

							this.markers = markers;
						}
					})
				}
			}
		}
	}
</script>

<style>

</style>
